<template>
	<div>
		<div style="margin: 0 100px 20px 0">
			<a-row type="flex" justify="end">
				<a-col>
					<a-button type="primary" @click="clickBtn('add','')"> 新增按钮 </a-button>
				</a-col>
			</a-row>
		</div>
		<a-table :columns="columns" :data-source="list" bordered :loading="loading" :pagination="pagination">
			<template slot="other" slot-scope="text, record, index">
				<span style="margin: 0 10px 0 0;" @click="clickBtn('edit',record)">
					<a>编辑</a>
				</span>
				<a-popconfirm title="是否要删除这条数据?" ok-text="是" cancel-text="否" @confirm="delList(record)">
					<a>删除</a>
				</a-popconfirm>
			</template>
		</a-table>
		<a-modal width="80%" title="新增问题" :visible="visible" @ok="btnOK" @cancel="handleCancel">
			<a-table :row-selection="rowSelection" :columns="modalCol" :data-source="list" bordered :loading="loading"
				ref="roleForm" :pagination="pagination">
				<template :slot="col" slot-scope="text, record, index" v-for="col in ['issueDesc']">
					<div :key="col">
						<a-input placeholder="请输入" :value="record[col]"
							@change="e => changeList(e.target.value, record.rowNo, col)" />
					</div>
				</template>
			</a-table>
		</a-modal>
		<a-modal width="80%" title="编辑问题" :visible="visibleEdit" @ok="btnEdit" @cancel="handleCancel">
			<a-table :columns="modalColEdit" :data-source="editList" bordered :loading="loading" ref="roleForm"
				:pagination="pagination">
				<template slot="issueSubclass" slot-scope="text, record, index">
					<a-input placeholder="请输入" :value="text"
						@change="e => editChange(e.target.value,'issueSubclass')" />
				</template>
				<template slot="issueDesc" slot-scope="text, record, index">
					<a-input placeholder="请输入" :value="text" @change="e => editChange(e.target.value,'issueDesc')" />
				</template>
				<template slot="notChange" slot-scope="text, record, index">
					<a-input placeholder="请输入" :value="text" @change="e => editChange(e.target.value,'notChange')" />
				</template>
			</a-table>
		</a-modal>
	</div>
</template>
<script>
	import {
		getNewStyleIssue,
		saveNewStyleIssue4Node,
		updateNewStyleIssue4Node,
		deleteNewStyleIssue4Node
	} from '@api/spection/index'
	export default {
		data() {
			return {
				modalCol: [{
						title: '序号',
						dataIndex: '序号',
						key: '序号',
						align: 'center',
						width: 80,
						customRender: (text, record, index) => {
							return index + 1
						}
					},
					{
						title: '问题大类',
						key: 'issueSubclass',
						dataIndex: 'issueSubclass',
						align: 'center',
						width: 250,
						scopedSlots: {
							customRender: 'issueSubclass'
						},
					},
					{
						title: '描述',
						key: 'issueDesc',
						dataIndex: 'issueDesc',
						align: 'center',
						scopedSlots: {
							customRender: 'issueDesc'
						},
					}
				],
				modalColEdit: [{
						title: '序号',
						dataIndex: '序号',
						key: '序号',
						align: 'center',
						width: 80,
						customRender: (text, record, index) => {
							return index + 1
						}
					},
					{
						title: '问题大类',
						key: 'issueSubclass',
						dataIndex: 'issueSubclass',
						align: 'center',
						width: 250,
						scopedSlots: {
							customRender: 'issueSubclass'
						},
					},
					{
						title: '描述',
						key: 'issueDesc',
						dataIndex: 'issueDesc',
						align: 'center',
						scopedSlots: {
							customRender: 'issueDesc'
						},
					},
					{
						title: '不改原因',
						key: 'notChange',
						dataIndex: 'notChange',
						align: 'center',
						width: 450,
						scopedSlots: {
							customRender: 'notChange'
						},
					},
				],
				columns: [{
						title: '序号',
						dataIndex: '序号',
						key: '序号',
						align: 'center',
						customRender: (text, record, index) => {
							return index + 1
						},
					},
					{
						title: '提问节点',
						key: 'issueNoteName',
						dataIndex: 'issueNoteName',
						align: 'center',
					},
					{
						title: '问题版次',
						key: 'editionName',
						dataIndex: 'editionName',
						align: 'center',
					},
					{
						title: '问题严重程度',
						key: 'issueDegree',
						dataIndex: 'issueDegree',
						align: 'center',
					},
					{
						title: '问题大类',
						key: 'issueSubclass',
						dataIndex: 'issueSubclass',
						align: 'center',
					},
					{
						title: '描述',
						key: 'issueDesc',
						dataIndex: 'issueDesc',
						align: 'center',
						width: 200
					},
					{
						title: '待处理人',
						key: 'nextUser',
						dataIndex: 'nextUser',
						align: 'center',
					},
					{
						title: '回复',
						key: 'reply',
						dataIndex: 'reply',
						align: 'center',
						width: 200
					},
					{
						title: '不改原因',
						key: 'notChange',
						dataIndex: 'notChange',
						align: 'center',
						width: 200
					},
					{
						title: '记录时间',
						key: 'inputDate',
						dataIndex: 'inputDate',
						align: 'center',
					},
					{
						title: '创建人',
						key: 'inputUserName',
						dataIndex: 'nextUser',
						align: 'center',
					},
					{
						title: '操作',
						key: 'other',
						dataIndex: 'other',
						align: 'center',
						scopedSlots: {
							customRender: 'other'
						},
						width: 130
					},
				],
				username: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
				list: [],
				pagination: false,
				loading: false,
				value: '',
				ipagination: {
					current: 1,
					size: 10,
					pageSize: ['10', '20', '30', '40'],
					total: 50
				},
				roleForm: {},
				visible: false,
				selList: [],
				type: '',
				editList: [],
				visibleEdit: false
			}
		},
		created() {
			this.getList()
		},
		computed: {
			rowSelection() {
				return {
					onChange: (selectedRowKeys, selectedRows) => {
						this.selList = []
						this.selList = selectedRows
						console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
					},
					getCheckboxProps: record => ({
						props: {
							disabled: record.name === 'Disabled User', // Column configuration not to be checked
							name: record.name,
						},
					}),
				};
			}
		},
		methods: {
			delList(row) {
				this.deleteNewStyleIssue4Node(row)
			},
			editChange(e, key) {
				console.log(e)
				this.editList[0][key] = e
			},
			changeList(rowVal, rowId, rowkey) {
				const newData = [...this.list]
				const target = newData.find(item => rowId === item.rowNo);
				if (target) {
					target[rowkey] = rowVal;
					this.list = newData;
				}
			},
			clickBtn(title, row) {
				this.type = title
				if (title == 'edit') {
					this.editList = []
					this.editList.push(row)
					this.visibleEdit = true
				} else {
					this.visible = true
				}
			},
			btnEdit() {
				this.updateNewStyleIssue4Node()
			},
			async deleteNewStyleIssue4Node(row) {
				const params = {
					billNo: row.billNo,
					rowNo: 0
				}
				await deleteNewStyleIssue4Node(params).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg)
						this.getList()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async updateNewStyleIssue4Node() {
				this.editList[0].username = this.username.value.phone,
					this.editList[0].jobNumber = this.username.value.workNo,
					this.editList[0].roleCodeList = this.username.value.roleCode
				await updateNewStyleIssue4Node(this.editList[0]).then(res => {
					if (res.code == 200) {
						this.$message.success('编辑成功')
						this.visibleEdit = false
						this.getList()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async saveNewStyleIssue4Node() {
				this.selList.forEach(el => {
					el.issueNode = el.issueNote
					el.username = this.username.value.phone,
						el.jobNumber = this.username.value.workNo,
						el.roleCodeList = this.username.value.roleCode
				})
				const params = {
					issueInfoDtoList: this.selList
				}
				await saveNewStyleIssue4Node(params).then(res => {
					if (res.code == 200) {
						this.$message.success('新增成功')
						this.getList()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async getList() {
				const params = {
					// billNo:this.$route.query.billNo,
					billNo: '1901170K0079',
					username: this.username.value.phone,
					jobNumber: this.username.value.workNo,
					roleCodeList: this.username.value.roleCode
				}
				await getNewStyleIssue(params).then(res => {
					if (res.code == 200) {
						this.list = res.data
						console.log(res)
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})

			},
			onChange(current, pageSize) {
				console.log(current, pageSize)
				this.current = current
			},
			async editRole(id) {
				//   this.roleForm = await getRoleDetail(id)
				this.visible = true // 为了不出现闪烁的问题 先获取数据 再弹出层
			},
			// 确定接口
			async btnOK() {
				console.log(this.type)
				if (this.type == 'add') {
					this.saveNewStyleIssue4Node()
				}
				this.visible = false

			},
			// 删除接口
			async deleteRole(id) {
				//  提示
				try {
					// await this.$confirm({ title: ' 确认删除吗？' })
					// 只有点击了确定 才能进入到下方
					// await deleteRole(id) // 调用删除接口
					// this.getRoleList() // 重新加载数据

					this.$message.success('删除角色成功')
				} catch (error) {
					console.log(error)
				}
			},
			// 取消
			handleCancel(e) {
				if (this.type == 'add') {
					this.visible = false
				} else {
					this.visibleEdit = false
				}

			}
		}
	}
</script>